<!DOCTYPE html>
<html lang="CN-ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宋 · 运</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>    
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');
        
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        
        .container{
            max-width: 99%;
            position: relative;
            margin: 0 auto;
            text-align: center;
            height: 100vh;
            overflow: hidden;
        }
        
        .bg{
            position: relative;
            margin: auto;
            width: fit-content;
            overflow: hidden;
        }
        
        .bgimg{
            max-width: 100%;
            max-height: 100%;
            height: 100vh;
        }
        
        .longzhou{
            width: 60%;
            left: 1%;
            top: 55%;
            position: absolute;
        }
        
        .imglist {
            width: 100%;
            height: 20%;
            position: absolute;
            top: 0%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .imglist img {
            width: 30%;
            height: auto;
            margin: 0 2%;
            opacity: 0.5;
            cursor: pointer;
            transition: transform 0.5s, opacity 0.5s;
        }
        
        .imglist img.clicked {
            transform: scale(1.05);
            opacity: 1;
        }

        .musicbtn{
            position: absolute;
            width: 50px;
            height: 50px;
            bottom: 2%;
            right: 2%;
            margin: 0 auto;
        }
        .musicimg{
            width: 100%;
            height: 100%;
            animation: rotate 5s linear infinite;

        }
        .indeximg{
            width: 100%;
            height: 100%;
        }
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        .btnindex {
            width: 10%;
            height: 5%;
            top: 0.5%;
            right: 0.5%;
            position: absolute;
        }
    </style>
</head>
<body>
    <audio id="audio" autoplay loop>
        <source src="./music/music.mp3" type="audio/mpeg">
    </audio>
    <div class="container">
        <div class="bg">
            <img class="bgimg" src="./image/lzbg.jpg">
        </div>
        
        <img class="longzhou" src="./image/lz1.png">
        <div class="imglist">
            <img id="one" src="./image/long1.png">
            <img id="two" src="./image/long2.png">
            <img id="three" src="./image/long3.png">
        </div>

        <div class="musicbtn">
            <img id="musicImg" class="musicimg" src="./image/music.png">
        </div>
        <div class="btnindex">
            <img class="indeximg" src="./image/home.png">
        </div>
    </div>
    
    <script>
        var isMuted = false;
        function toggleMusic() {
        var audio = $('#audio')[0];
        var musicImg = $('#musicImg');

    if (isMuted) {
        audio.play();
        musicImg.attr('src', './image/music.png');
        isMuted = false;
    } else {
        audio.pause();
        musicImg.attr('src', './image/nomusic.png');
        isMuted = true;
    }
    }
        $(document).ready(function() {
        $(".musicbtn").click(function() {
        toggleMusic();
        });
    });

        $(document).ready(function() {
            $(".imglist img").click(function() {
                $(".imglist img").not(this).removeClass("clicked");
                $(this).addClass("clicked");
            });
        });
        $(".longzhou").click(function() {
            var currentSrc = $(this).attr("src");
            var newSrc = currentSrc === "./image/lz1.png" ? "./image/lz2.png" : "./image/lz1.png";
            $(this).attr("src", newSrc);
        });
        $('.btnindex').click(function() {
                window.location.href = 'juanzhou.html';
        });
        
    </script>
</body>
</html>
